"use client"

import React, { useState, useEffect } from 'react'
import { AdminLayout } from '@/components/layout/admin-layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Modal } from '@/components/ui/modal'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  FileText,
  Plus,
  Search,
  Filter,
  RefreshCw,
  Eye,
  Edit,
  Trash2,
  Calendar,
  User,
  Heart,
  MessageSquare
} from 'lucide-react'
import { adminAPI, type NewsArticle } from '@/lib/api'
import { formatDateTime } from '@/lib/utils'
import { CompletePagination } from '@/components/ui/pagination'
import { useToast } from '@/components/ui/toast'
import { useConfirm } from '@/components/ui/confirm'

export default function NewsPage() {
  const [news, setNews] = useState<NewsArticle[]>([])
  const [loading, setLoading] = useState(true)
  const toast = useToast()
  const confirm = useConfirm()
  const [searchTerm, setSearchTerm] = useState('')
  const [statusFilter, setStatusFilter] = useState<'all' | 'draft' | 'published' | 'archived'>('all')
  const [categoryFilter, setCategoryFilter] = useState<string>('all')
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(15)

  // 创建文章模态框状态
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [createArticleForm, setCreateArticleForm] = useState({
    title: '',
    summary: '',
    content: '',
    category: 'startup',
    tags: '',
    status: 'draft'
  })

  // 查看和编辑文章模态框状态
  const [showViewModal, setShowViewModal] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [selectedArticle, setSelectedArticle] = useState<NewsArticle | null>(null)
  const [editArticleForm, setEditArticleForm] = useState({
    title: '',
    summary: '',
    content: '',
    category: 'startup',
    tags: '',
    status: 'draft'
  })

  const [submitting, setSubmitting] = useState(false)

  useEffect(() => {
    const loadNews = async () => {
      try {
        const newsData = await adminAPI.getAllNews()
        setNews(newsData)
      } catch (error) {
        console.error('加载新闻失败:', error)
      } finally {
        setLoading(false)
      }
    }

    loadNews()
  }, [])

  const filteredNews = news.filter(article => {
    const matchesSearch = 
      article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      article.summary.toLowerCase().includes(searchTerm.toLowerCase()) ||
      article.authorName.toLowerCase().includes(searchTerm.toLowerCase())

    const matchesStatus = 
      statusFilter === 'all' || article.status === statusFilter

    const matchesCategory =
      categoryFilter === 'all' || article.category === categoryFilter

    return matchesSearch && matchesStatus && matchesCategory
  })

  // 分页计算
  const totalItems = filteredNews.length
  const totalPages = Math.ceil(totalItems / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const endIndex = startIndex + pageSize
  const paginatedNews = filteredNews.slice(startIndex, endIndex)

  // 重置搜索或筛选时回到第一页
  useEffect(() => {
    setCurrentPage(1)
  }, [searchTerm, statusFilter, categoryFilter])

  const handlePageChange = (page: number) => {
    setCurrentPage(page)
  }

  const handlePageSizeChange = (size: number) => {
    setPageSize(size)
    setCurrentPage(1)
  }

  const categories = [...new Set(news.map(article => article.category))]

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'published':
        return <Badge className="bg-green-100 text-green-800">已发布</Badge>
      case 'draft':
        return <Badge className="bg-yellow-100 text-yellow-800">草稿</Badge>
      case 'archived':
        return <Badge className="bg-gray-100 text-gray-800">已归档</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  const getCategoryBadge = (category: string) => {
    const categoryMap: Record<string, { label: string; color: string }> = {
      startup: { label: '创业资讯', color: 'bg-blue-100 text-blue-800' },
      funding: { label: '投融资', color: 'bg-purple-100 text-purple-800' },
      policy: { label: '政策解读', color: 'bg-amber-100 text-amber-800' },
      tech: { label: '科技创新', color: 'bg-emerald-100 text-emerald-800' },
    }
    const config = categoryMap[category] || { label: category, color: 'bg-gray-100 text-gray-800' }
    return <Badge className={config.color}>{config.label}</Badge>
  }


  // 处理创建文章表单变化
  const handleCreateFormChange = (field: string, value: string) => {
    setCreateArticleForm(prev => ({
      ...prev,
      [field]: value
    }))
  }

  // 重置创建文章表单
  const resetCreateForm = () => {
    setCreateArticleForm({
      title: '',
      summary: '',
      content: '',
      category: 'startup',
      tags: '',
      status: 'draft'
    })
  }

  // 处理创建文章
  const handleCreateArticle = async () => {
    if (!createArticleForm.title || !createArticleForm.summary || !createArticleForm.content) {
      toast.warning('请填写必填字段：标题、摘要、内容')
      return
    }

    setSubmitting(true)
    try {
      // 处理标签 - 将数组转换为逗号分隔的字符串
      const formData = {
        ...createArticleForm,
        tags: createArticleForm.tags // 保持字符串格式，后端期望逗号分隔的字符串
      }

      // 调用API创建文章
      await adminAPI.createNews(formData)
      
      // 成功后重新加载文章列表
      const newsData = await adminAPI.getAllNews()
      setNews(newsData)
      
      // 关闭模态框并重置表单
      setShowCreateModal(false)
      resetCreateForm()
      
      toast.success('文章创建成功！')
    } catch (error) {
      console.error('创建文章失败:', error)
      toast.error('创建文章失败，请重试')
    } finally {
      setSubmitting(false)
    }
  }

  // 处理编辑文章表单变化
  const handleEditFormChange = (field: string, value: string) => {
    setEditArticleForm(prev => ({
      ...prev,
      [field]: value
    }))
  }

  // 重置编辑表单
  const resetEditForm = () => {
    setEditArticleForm({
      title: '',
      summary: '',
      content: '',
      category: 'startup',
      tags: '',
      status: 'draft'
    })
  }

  // 处理新闻操作（查看、编辑、删除）
  const handleNewsAction = async (action: string, articleId: string) => {
    try {
      if (action === '查看') {
        const article = await adminAPI.getNewsById(articleId)
        setSelectedArticle(article)
        setShowViewModal(true)
      } else if (action === '编辑') {
        const article = await adminAPI.getNewsById(articleId)
        setSelectedArticle(article)
        setEditArticleForm({
          title: article.title || '',
          summary: article.summary || '',
          content: article.content || '',
          category: article.category || 'startup',
          tags: article.tags || '',
          status: article.status || 'draft'
        })
        setShowEditModal(true)
      } else if (action === '删除') {
        const confirmed = await confirm({
          title: '确认删除',
          message: '确认删除这篇文章吗？此操作不可恢复！',
          type: 'danger',
          confirmText: '删除',
          cancelText: '取消'
        })
        
        if (confirmed) {
          await adminAPI.deleteNews(articleId)
          // 重新加载列表
          const newsData = await adminAPI.getAllNews()
          setNews(newsData)
          toast.success('文章删除成功！')
        }
      }
    } catch (error) {
      console.error(`${action}文章失败:`, error)
      toast.error(`${action}文章失败，请重试`)
    }
  }

  // 处理编辑文章
  const handleEditArticle = async () => {
    if (!editArticleForm.title || !editArticleForm.summary || !editArticleForm.content) {
      toast.warning('请填写必填字段：标题、摘要、内容')
      return
    }

    if (!selectedArticle) return

    setSubmitting(true)
    try {
      // 调用API更新文章
      await adminAPI.updateNews(selectedArticle.id, editArticleForm)
      
      // 重新加载文章列表
      const newsData = await adminAPI.getAllNews()
      setNews(newsData)
      
      // 关闭模态框并重置表单
      setShowEditModal(false)
      resetEditForm()
      setSelectedArticle(null)
      
      toast.success('文章更新成功！')
    } catch (error) {
      console.error('更新文章失败:', error)
      toast.error('更新文章失败，请重试')
    } finally {
      setSubmitting(false)
    }
  }

  if (loading) {
    return (
      <AdminLayout>
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold text-gray-900">内容管理</h1>
          </div>
          <div className="text-center py-12">加载中...</div>
        </div>
      </AdminLayout>
    )
  }

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Page Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">内容管理</h1>
            <p className="text-gray-600">管理新闻文章和内容发布</p>
          </div>
          <Button onClick={() => setShowCreateModal(true)}>
            <Plus className="h-4 w-4 mr-2" />
            新建文章
          </Button>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">文章总数</p>
                  <p className="text-2xl font-bold text-gray-900">{news.length}</p>
                </div>
                <FileText className="h-8 w-8 text-blue-600" />
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">已发布</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {news.filter(n => n.status === 'published').length}
                  </p>
                </div>
                <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                  <FileText className="h-5 w-5 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">草稿</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {news.filter(n => n.status === 'draft').length}
                  </p>
                </div>
                <div className="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                  <FileText className="h-5 w-5 text-yellow-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">总浏览量</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {news.reduce((total, article) => total + (article.views || 0), 0).toLocaleString()}
                  </p>
                </div>
                <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                  <Eye className="h-5 w-5 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Filters and Search */}
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
              <div className="flex flex-1 gap-4">
                <div className="relative flex-1 max-w-sm">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                  <input
                    type="text"
                    placeholder="搜索文章..."
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
                <select
                  className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value as any)}
                >
                  <option value="all">全部状态</option>
                  <option value="published">已发布</option>
                  <option value="draft">草稿</option>
                  <option value="archived">已归档</option>
                </select>
                <select
                  className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                  value={categoryFilter}
                  onChange={(e) => setCategoryFilter(e.target.value)}
                >
                  <option value="all">全部分类</option>
                  {categories.map(category => (
                    <option key={category} value={category}>
                      {category === 'startup' ? '创业资讯' :
                       category === 'funding' ? '投融资' :
                       category === 'policy' ? '政策解读' :
                       category === 'tech' ? '科技创新' : category}
                    </option>
                  ))}
                </select>
              </div>
              <div className="flex gap-2">
                <Button variant="outline" size="sm">
                  <Filter className="h-4 w-4 mr-2" />
                  高级筛选
                </Button>
                <Button variant="outline" size="sm" onClick={() => window.location.reload()}>
                  <RefreshCw className="h-4 w-4 mr-2" />
                  刷新
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* News Table */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <FileText className="h-5 w-5" />
                <span>文章列表 ({filteredNews.length})</span>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>文章信息</TableHead>
                  <TableHead>分类</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>作者</TableHead>
                  <TableHead>统计</TableHead>
                  <TableHead>发布时间</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paginatedNews.length > 0 ? (
                  paginatedNews.map((article) => (
                    <TableRow key={article.id}>
                      <TableCell>
                        <div className="max-w-md">
                          <h4 className="font-medium text-gray-900 mb-1 line-clamp-2">{article.title}</h4>
                          <p className="text-sm text-gray-500 line-clamp-2">{article.summary}</p>
                          <div className="flex flex-wrap gap-1 mt-2">
                            {article.tags && article.tags.trim() ? (
                              <>
                                {article.tags.split(',').slice(0, 2).map((tag, index) => (
                                  <Badge key={index} variant="outline" className="text-xs">
                                    {tag.trim()}
                                  </Badge>
                                ))}
                                {article.tags.split(',').length > 2 && (
                                  <Badge variant="outline" className="text-xs">
                                    +{article.tags.split(',').length - 2}
                                  </Badge>
                                )}
                              </>
                            ) : (
                              <Badge variant="outline" className="text-xs text-gray-400">
                                无标签
                              </Badge>
                            )}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        {getCategoryBadge(article.category)}
                      </TableCell>
                      <TableCell>
                        {getStatusBadge(article.status)}
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <User className="h-4 w-4 text-gray-400" />
                          <span className="text-sm text-gray-600">{article.authorName}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1 text-sm text-gray-600">
                          <div className="flex items-center space-x-1">
                            <Eye className="h-3 w-3" />
                            <span>{(article.views || 0).toLocaleString()}</span>
                          </div>
                          <div className="flex items-center space-x-1">
                            <Heart className="h-3 w-3" />
                            <span>{(article.likes || 0).toLocaleString()}</span>
                          </div>
                          <div className="flex items-center space-x-1">
                            <MessageSquare className="h-3 w-3" />
                            <span>{article.comments || 0}</span>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm text-gray-600">
                          {article.publishedAt ? (
                            <>
                              <div className="flex items-center space-x-1 mb-1">
                                <Calendar className="h-3 w-3" />
                                <span>发布</span>
                              </div>
                              <div>{formatDateTime(article.publishedAt)}</div>
                            </>
                          ) : (
                            <div className="text-gray-400">未发布</div>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleNewsAction('查看', article.id)}
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleNewsAction('编辑', article.id)}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleNewsAction('删除', article.id)}
                          >
                            <Trash2 className="h-4 w-4 text-red-600" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center py-8">
                      <div className="text-gray-500">
                        {searchTerm || statusFilter !== 'all' || categoryFilter !== 'all' 
                          ? '没有找到匹配的文章' 
                          : '暂无文章数据'
                        }
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        {/* Pagination */}
        {totalItems > 0 && (
          <Card>
            <CardContent className="p-6">
              <CompletePagination
                currentPage={currentPage}
                totalPages={totalPages}
                totalItems={totalItems}
                pageSize={pageSize}
                onPageChange={handlePageChange}
                onPageSizeChange={handlePageSizeChange}
                pageSizeOptions={[10, 15, 20, 50]}
              />
            </CardContent>
          </Card>
        )}

        {/* Create Article Modal */}
        <Modal
          isOpen={showCreateModal}
          onClose={() => {
            setShowCreateModal(false)
            resetCreateForm()
          }}
          title="新建文章"
          size="xl"
          footer={
            <div className="flex justify-end space-x-2">
              <Button 
                variant="outline" 
                onClick={() => {
                  setShowCreateModal(false)
                  resetCreateForm()
                }}
                disabled={submitting}
              >
                取消
              </Button>
              <Button 
                onClick={handleCreateArticle}
                disabled={submitting}
              >
                {submitting ? '发布中...' : '创建文章'}
              </Button>
            </div>
          }
        >
          <div className="space-y-4 max-h-96 overflow-y-auto">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                文章标题 <span className="text-red-500">*</span>
              </label>
              <Input
                value={createArticleForm.title}
                onChange={(e) => handleCreateFormChange('title', e.target.value)}
                placeholder="请输入文章标题"
                disabled={submitting}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                文章摘要 <span className="text-red-500">*</span>
              </label>
              <textarea
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                rows={3}
                value={createArticleForm.summary}
                onChange={(e) => handleCreateFormChange('summary', e.target.value)}
                placeholder="请输入文章摘要"
                disabled={submitting}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                文章内容 <span className="text-red-500">*</span>
                <span className="text-xs text-gray-500 ml-2">支持Markdown格式</span>
              </label>
              <textarea
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent font-mono"
                rows={8}
                value={createArticleForm.content}
                onChange={(e) => handleCreateFormChange('content', e.target.value)}
                placeholder="请输入文章内容，支持Markdown格式：
# 标题
## 二级标题
**粗体** *斜体*
- 列表项
[链接](url)
![图片](image-url)
```
代码块
```"
                disabled={submitting}
              />
              <div className="mt-1 text-xs text-gray-500">
                支持标准Markdown语法：标题、粗体、斜体、列表、链接、图片、代码块等
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  文章分类
                </label>
                <select
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                  value={createArticleForm.category}
                  onChange={(e) => handleCreateFormChange('category', e.target.value)}
                  disabled={submitting}
                >
                  <option value="startup">创业资讯</option>
                  <option value="funding">投融资</option>
                  <option value="policy">政策解读</option>
                  <option value="tech">科技创新</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  发布状态
                </label>
                <select
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                  value={createArticleForm.status}
                  onChange={(e) => handleCreateFormChange('status', e.target.value)}
                  disabled={submitting}
                >
                  <option value="draft">草稿</option>
                  <option value="published">发布</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                标签
              </label>
              <Input
                value={createArticleForm.tags}
                onChange={(e) => handleCreateFormChange('tags', e.target.value)}
                placeholder="请输入标签，多个标签用逗号分隔"
                disabled={submitting}
              />
              <p className="text-xs text-gray-500 mt-1">例如：创业,融资,政策</p>
            </div>
          </div>
        </Modal>

        {/* View Article Modal */}
        <Modal
          isOpen={showViewModal}
          onClose={() => {
            setShowViewModal(false)
            setSelectedArticle(null)
          }}
          title="查看文章"
          size="xl"
          footer={
            <div className="flex justify-end">
              <Button onClick={() => setShowViewModal(false)}>关闭</Button>
            </div>
          }
        >
          {selectedArticle && (
            <div className="space-y-4 max-h-96 overflow-y-auto">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">文章标题</label>
                <div className="text-base font-medium">{selectedArticle.title}</div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">文章摘要</label>
                <div className="text-sm text-gray-700">{selectedArticle.summary}</div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">文章内容</label>
                <div className="text-sm text-gray-700 border border-gray-200 rounded p-3 bg-gray-50 whitespace-pre-wrap">
                  {selectedArticle.content}
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">分类</label>
                  <div className="text-sm">{selectedArticle.category}</div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">状态</label>
                  <div className="text-sm">{selectedArticle.status}</div>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">标签</label>
                <div className="flex flex-wrap gap-1">
                  {selectedArticle.tags.split(',').map((tag, index) => (
                    <Badge key={index} variant="outline" className="text-xs">
                      {tag.trim()}
                    </Badge>
                  ))}
                </div>
              </div>
            </div>
          )}
        </Modal>

        {/* Edit Article Modal */}
        <Modal
          isOpen={showEditModal}
          onClose={() => {
            setShowEditModal(false)
            resetEditForm()
            setSelectedArticle(null)
          }}
          title="编辑文章"
          size="xl"
          footer={
            <div className="flex justify-end space-x-2">
              <Button 
                variant="outline" 
                onClick={() => {
                  setShowEditModal(false)
                  resetEditForm()
                  setSelectedArticle(null)
                }}
                disabled={submitting}
              >
                取消
              </Button>
              <Button 
                onClick={handleEditArticle}
                disabled={submitting}
              >
                {submitting ? '保存中...' : '保存更改'}
              </Button>
            </div>
          }
        >
          <div className="space-y-4 max-h-96 overflow-y-auto">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                文章标题 <span className="text-red-500">*</span>
              </label>
              <Input
                value={editArticleForm.title}
                onChange={(e) => handleEditFormChange('title', e.target.value)}
                placeholder="请输入文章标题"
                disabled={submitting}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                文章摘要 <span className="text-red-500">*</span>
              </label>
              <textarea
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                rows={3}
                value={editArticleForm.summary}
                onChange={(e) => handleEditFormChange('summary', e.target.value)}
                placeholder="请输入文章摘要"
                disabled={submitting}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                文章内容 <span className="text-red-500">*</span>
                <span className="text-xs text-gray-500 ml-2">支持Markdown格式</span>
              </label>
              <textarea
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent font-mono"
                rows={8}
                value={editArticleForm.content}
                onChange={(e) => handleEditFormChange('content', e.target.value)}
                placeholder="请输入文章内容，支持Markdown格式"
                disabled={submitting}
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  文章分类
                </label>
                <select
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                  value={editArticleForm.category}
                  onChange={(e) => handleEditFormChange('category', e.target.value)}
                  disabled={submitting}
                >
                  <option value="startup">创业资讯</option>
                  <option value="funding">投融资</option>
                  <option value="policy">政策解读</option>
                  <option value="tech">科技创新</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  发布状态
                </label>
                <select
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                  value={editArticleForm.status}
                  onChange={(e) => handleEditFormChange('status', e.target.value)}
                  disabled={submitting}
                >
                  <option value="draft">草稿</option>
                  <option value="published">发布</option>
                  <option value="archived">归档</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                标签
              </label>
              <Input
                value={editArticleForm.tags}
                onChange={(e) => handleEditFormChange('tags', e.target.value)}
                placeholder="请输入标签，多个标签用逗号分隔"
                disabled={submitting}
              />
              <p className="text-xs text-gray-500 mt-1">例如：创业,融资,政策</p>
            </div>
          </div>
        </Modal>
      </div>
    </AdminLayout>
  )
}